import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

let renderer, camera, scene
let axesHelper
let mesh
let controls
let clip,mixer
let clock = new THREE.Clock()




initRenderer()
initCamera()
initScene()
initAxesHelper()
initLight()
initMeshes()
initControls()
initAnimation()
enableAnimation()
animate()


window.addEventListener('resize', function () {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
})


function initRenderer() {
    renderer = new THREE.WebGLRenderer()
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)
}

function initCamera() {
    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000)
    camera.position.set(10,30,50)
}

function initScene(params) {
    scene = new THREE.Scene()
    scene.background = new THREE.Color(0x888888)
}

function initLight(params) {
    scene.add(new THREE.AmbientLight(0xfffffff, 0.2))
    const dirLight = new THREE.DirectionalLight(0xffffff, 1)
    dirLight.position.set(10, 10, 5)
    scene.add(dirLight)
}
function initAxesHelper(params) {
    axesHelper = new THREE.AxesHelper(10)
    scene.add(axesHelper)
}
function initMeshes() {
    const geometry = new THREE.BoxGeometry(2, 2, 2)
    const material = new THREE.MeshPhongMaterial({
        color: 0xff0000,
        transparent: true
    })
    mesh = new THREE.Mesh(geometry, material)
    scene.add(mesh)
}

function  initControls(params) {
    controls = new OrbitControls(camera, renderer.domElement)
}

function initAnimation(params) {
    //位置
    const positionKF = new THREE.VectorKeyframeTrack(
        '.position',
        [0, 1, 2,3],
        [
            0, 0, 0,
            10, 10, 0,
            10, 0, 0,
            0,0,0
        ]
    );

    //缩放
    const scaleKF = new THREE.VectorKeyframeTrack(
        '.scale',
        [0, 1, 2, 3],
        [
            1, 1, 1,
            2, 2, 2,
            0.5, 2, 2,
            1,1,1,
        ]
        
    )
    //旋转
    const xAxis = new THREE.Vector3(1, 0, 0)
    const qInitial = new THREE.Quaternion().setFromAxisAngle(xAxis, 0)
    const qFinal = new THREE.Quaternion().setFromAxisAngle(xAxis, Math.PI)
    const quaternionKF = new THREE.QuaternionKeyframeTrack(
        '.quaternion',
        [0, 1, 2, 3],
        [
            qInitial.x, qInitial.y, qInitial.z, qInitial.w,
            qFinal.x, qFinal.y, qFinal.z, qFinal.w,
            qInitial.x, qInitial.y, qInitial.z, qInitial.w,
            qFinal.x, qFinal.y, qFinal.z, qFinal.w,
            
        ]
    )
  //颜色
    const colorFK = new THREE.ColorKeyframeTrack(
        '.material.color',
        [0, 1, 2, 3],
        [
            1, 0, 0,
            0, 1, 0,
            0, 0, 1,
            0,0,0
        ]
    )
    //透明度
    const opacityKF = new THREE.ColorKeyframeTrack(
        '.material.opacity',
        [0, 1]
        [0.2, 0.3, 1, 1],
        [0.5,1,0.2,1]
    )

    clip = new THREE.AnimationClip(
        'Action',
        4,
        [positionKF,scaleKF,quaternionKF,colorFK,opacityKF]
    )
}
function enableAnimation(params) {
    mixer = new THREE.AnimationMixer(mesh)
    const clipAction = mixer.clipAction(clip)
    clipAction.play()
}

function animate(params) {
    requestAnimationFrame(animate)

   render()
}
function render(params) {
    const delata = clock.getDelta()
    renderer.render(scene, camera)
    mixer.update(delata)
}

